<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!-- <meta http-equiv="Cache-Control" content="public" /> -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>汽车在线</title>
    <link type="text/css" rel="stylesheet" href="css/global.css" />
    <script>
        if ('mapoo.10010care.com' == 'www.gpsoo.net') {
            location.href = location.href.replace(location.host, 'mapoo.10010care.com');
        }
    </script>
    <style>
        .header .info-bar {
            position: absolute;
        }

        .header .title .toolbox {
            background-image: url(images/icon_menu.png);
        }

        #map-container {
            width: 100%;
            height: 100%;
            margin-top: 3.5em
        }

        .set-top {
            margin-top: 25px;
        }

        .info-window-container {
            width: 14em;
            -webkit-background-color: rgba(0, 0, 0, .5);
            background-color: rgba(0, 0, 0, .5);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            position: relative;
            color: #fff;
            padding: 10px;
        }

        .info-window-container .content li {
            padding: 2px 0;
        }

        .info-window-container a,
        .info-window-container a:visited {
            color: #fff;
            text-decoration: underline;
        }

        .info-window-container .arrow {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid rgba(0, 0, 0, .5);
            width: 0;
            height: 0;
            position: absolute;
            left: 50%;
            margin-left: -3px;
            bottom: -7px;
        }

        .info-window-container .info-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 30px;
            height: 30px;
            background-image: url(images/icon_info.png);
            -webkit-background-size: contain;
            background-size: contain;
        }

        .info-window-container .content .name {
            font-size: 1.4em;
            margin-bottom: 5px;
        }

        .info-window-google {
            font-size: 16px;
            font-family: '微软雅黑', tahoma, arial, '宋体';
            font-weight: normal;
        }

        #menu {
            position: absolute;
            right: 0;
            top: 50px;
            -webkit-transition: all .5s;
            transition: all .5s;
            border-radius: 5px;
            background-color: #fff;
            z-index: 999;
            padding: 10px 0;
            display: none;
        }

        #menu .arrow {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 7px solid #fff;
            width: 0;
            height: 0;
            position: absolute;
            right: 23px;
            margin-left: -3px;
            top: -7px;
        }

        #menu ul li {
            border-bottom: 1px solid #eee;
        }

        #menu ul li a {
            background-image: url(images/icon_monitor_off.png);
            -webkit-background-size: cover;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 5px 0;
            display: block;
            padding: 5px 10px 5px 40px;
            margin: 5px 0;
        }

        #menu .switch.pause {
            background-image: url(images/icon_monitor_on.png);
        }

        #menu .fence {
            background-image: url(images/icon_fence.png);
        }

        #menu .alarm {
            background-image: url(images/icon_alarm.png);
        }

        #menu .command {
            background-image: url(images/icon_command.png);
        }
    </style>
    <script src="js/lang_cn.js"></script>
    <script src="js/brand/zepto.min.js"></script>
    <script src="js/global.js"></script>
    <script>
        (function () {
            try {
                var time = +goome.wx.utils.params().time,
                    now = Math.ceil(new Date().getTime() / 1000);
                if (!time || now - time > 7200) {
                    location.href = 'timeout.shtml';
                }
            } catch (e) { }
        })();
    </script>
</head>

<body>
    <div class="container">
        <div class="header">
            <h3 class="title">
                <a class="back" href="javascript:history.back();"></a><a class="toolbox" href="javascript:;"
                    id="menu-btn"></a>车辆追踪<span class="refresh-btn"></span>
            </h3>
            <div class="info-bar">
                <span class="right countdown"><span class="seconds">10</span>秒后刷新<i class="time-selector"></i></span>
                <span class="left name"></span>
                <span class="middle time"></span>
            </div>
        </div>
        <div id="map-container">
            <div class="loading">Loading...</div>
        </div>
        <div id="menu">
            <ul>
                <li><a class="switch" href="javascript:;" target="_self">停止追踪</a></li>
                <li><a class="fence" href="javascript:;" target="_self">电子围栏</a></li>
                <li><a class="alarm" href="javascript:;" target="_self">报警信息</a></li>
                <li><a class="command" href="javascript:;" target="_self">下发指令</a></li>
            </ul>
            <div class="arrow"></div>
        </div>
    </div>
    <script>
        var utils = goome.wx.utils;
        if (utils.defaultParams().map_type == 'GOOGLE') {
            utils.writeScripts(['http://ditu.google.cn/maps/api/js?sensor=false', 'js/overlay-google.js', 'js/track-google.js']);
        } else {
            utils.writeScripts(['http://api.map.baidu.com/api?v=2.0&ak=BCa2d508d2c567acd009eb09765f5797', 'js/brand/InfoBox_min.js', 'js/track.js']);
        }
    </script>
    <script type="text/javascript">
        trackPage.init();
        utils.mapTypeOptions('track');
    </script>
</body>

</html>